<template>
	<view class="uni-padding-wrap">
		<tui-list-view class="tui-list-view">
			<!-- <view class="uni-hello-text uni-center">支付金额</text></view>
			<view class="uni-h1 uni-center uni-common-mt">
				<text class="rmbLogo">￥</text>
				<input class="price" type="digit" :value="price" maxlength="4" @input="priceChange" />
			</view> -->
			
			<tui-list-cell @click="gerenXinxi" class="tui-list">
				<view class="tui-list-cell-name">支付金额</view>
				<view class="tui-right price">
					<input type="digit" :value="price" maxlength="4" @input="priceChange" />
				</view>
			</tui-list-cell>
		</tui-list-view>
		<view class="uni-btn-v uni-common-mt">
			<!-- #ifdef APP-PLUS -->
			<template v-if="providerList.length > 0">
				<button v-for="(item,index) in providerList" :key="index" @click="requestPayment(item,index)"
					:loading="item.loading">{{item.name}}支付</button>
			</template>
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
	import tuiListView from "@/components/tui/list-view"
	import tuiListCell from "@/components/tui/list-cell"
	import tuiIcon from "@/components/tui/icon"
    export default {
        data() {
            return {
                title: 'request-payment',
                loading: false,
                price: 1,
                providerList: []
            }
        },
		components: {
			tuiListView,
			tuiListCell,
			tuiIcon
		},
        onLoad: function() {
			
			// #ifndef H5
			uni.showShareMenu({
				showShareItems : ['qq', 'qzone', 'wechatFriends', 'wechatMoment']	
			});
			// #endif
			
            // #ifdef APP-PLUS
            uni.getProvider({
                service: "payment",
                success: (e) => {
                    console.log("payment success:" + JSON.stringify(e));
                    let providerList = [];
                    e.provider.map((value) => {
                        switch (value) {
                            // case 'alipay':
                            //     providerList.push({
                            //         name: '支付宝',
                            //         id: value,
                            //         loading: false
                            //     });
                            //     break;
                            case 'wxpay':
                                providerList.push({
                                    name: '微信',
                                    id: value,
                                    loading: false
                                });
                                break;
                            default:
                                break;
                        }
                    })
                    this.providerList = providerList;
                },
                fail: (e) => {
                    console.log("获取支付通道失败：", e);
                }
            });
            // #endif
        },
        methods: {
            async requestPayment(e, index) {
                this.providerList[index].loading = true;
                let orderInfo = await this.getOrderInfo(e.id);
                console.log("得到订单信息", orderInfo);
                if (orderInfo.statusCode !== 200) {
                    console.log("获得订单信息失败", orderInfo);
                    uni.showModal({
                        content: "获得订单信息失败",
                        showCancel: false
                    })
                    return;
                }
                uni.requestPayment({
                    provider: e.id,
                    orderInfo: orderInfo.data.data,
                    success: (e) => {
                        console.log("success", e);
                        uni.showToast({
                            title: "感谢您的赞助!"
                        })
                    },
                    fail: (e) => {
                        console.log("fail", e);
                        uni.showModal({
                            content: "支付失败,原因为: " + e.errMsg,
                            showCancel: false
                        })
                    },
                    complete: () => {
                        this.providerList[index].loading = false;
                    }
                })
            },
            getOrderInfo(e) {
                let appid = "";
                // #ifdef APP-PLUS
                appid = plus.runtime.appid;
                // #endif
                let url = 'http://10.10.60.200:8070/sc-admin/sales/wx/prepay/?brokerId=shba01';
                return new Promise((res) => {
                    uni.request({
                        url: url,
                        success: (result) => {
                            res(result);
                        },
                        fail: (e) => {
                            res(e);
                        }
                    })
                })
            },
            priceChange(e) {
                console.log(e.detail.value)
                this.price = e.detail.value;
            }
        }
    }
</script>

<style lang="scss" scoped>
    .rmbLogo {
        font-size: 40upx;
    }

    button {
        background-color: #007aff;
        color: #ffffff;
    }

    .uni-h1.uni-center {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-end;
    }

    .price {
       flex: 1;
	   color: #FF201F;
	   input{
		   width: auto;
		   font-size: 40upx;
	   }
    }
	

    .ipaPayBtn {
        margin-top: 30upx;
    }
</style>

